import React from 'react';
import {localParam} from "../../../components/common/function";
import Carousel from 'antd-mobile/lib/carousel'
import 'antd-mobile/lib/carousel/style/css'
import item from '../../../assets/css/goods/details/item.module.css'
import {Link} from "react-router-dom";
import {Drawer,Toast} from "antd-mobile";
import 'antd-mobile/lib/drawer/style/css'
import {connect} from "react-redux";

class ItemComponent extends React.Component{
    constructor(){
        super();
        this.state={
            txtList:[1,2,3],
            good:[],
            goodList:[],
            id:'',
            show:true,
            uid:localStorage.uid,
            open: false,
            amount:1,
            specList:[],
            check:true,
            size:[]
        }
    }
    componentWillMount() {
        this.getData();
    }
    getData(){
        let gid =decodeURIComponent(localParam(this.props.location.search).search.gid);
        this.setState({id:gid});
        fetch('http://vueshop.glbuys.com/api/home/goods/info?gid='+gid+'&type=details&token=1ec949a15fb709370f')
            .then((res)=>{
                return res.json()
            }).then(res=>{
                // console.log(res.data);
            if (res.code === 200) {
                this.setState({txtList:res.data.images});
                this.setState({good:res.data});
            }
        });
        fetch('http://vueshop.glbuys.com/api/home/reviews/index?gid='+gid+'&token=1ec949a15fb709370f&page=1')
            .then((res)=>{
                return res.json()
            }).then(res=>{
            // console.log(res.data);
            if (res.code === 200) {
                this.setState({goodList:res.data});
                this.setState({show:true})
            }else {
                this.setState({show:false})
            }
        });
        fetch("http://vueshop.glbuys.com/api/home/goods/info?gid="+gid+"&type=spec&token=1ec949a15fb709370f")
            .then(res => {
                return res.json()
            }).then(res => {
            // console.log(res.data);
            if (res.code === 200){
                this.setState({specList:res.data});
            }
        })
    }
    Btn(){
        let gid =decodeURIComponent(localParam(this.props.location.search).search.gid);
        if (localStorage.isLogin){
            fetch('http://vueshop.glbuys.com/api/goods/fav?uid='+this.state.uid+'&gid='+gid+'&token=1ec949a15fb709370f')
                .then((res)=>{
                    return res.json()
                }).then(res=>{
                    Toast.info(res.data, 1);
            });
        } else {
            Toast.info('请先登录会员', 1);
        }
    }
    onOpenChange = () => {
        this.setState({ open: !this.state.open });
    };
    // 减
    reduce(){
        let amount = this.state.amount-1;
        if(amount<=0){
            return false
        }else {
            this.setState({amount:amount})
        }
    }
    // 加
    plus(){
        let amount = this.state.amount+1;
        // this.state.num++;
        this.setState({amount:amount})
    }
    determine(){
        if(this.state.size.length===this.state.specList.length&&this.state.size[0]){
            if (localStorage.goods){
                let off = false;
                let good = JSON.parse(localStorage.goods);
                let goods = this.state.good;
                let size = this.state.size;
                for (let i=0;i<good.length;i++){
                    if (goods.gid === good[i].gid && JSON.stringify(size)===JSON.stringify(good[i].size)){
                        good[i].amount+=this.state.amount;
                        off = true;
                        break;
                    }
                }
                if(!off){
                    goods.amount = this.state.amount;
                    goods.check = this.state.check;
                    goods.size = this.state.size;
                    good.push(goods);
                }
                localStorage['goods']=JSON.stringify(good);
            }else {
                let goods=this.state.good;
                goods.amount = this.state.amount;
                goods.check = this.state.check;
                goods.size = this.state.size;
                this.setState({good:goods});
                localStorage['goods']=JSON.stringify([this.state.good]);
            }
            Toast.info("加入成功", 1);
        }else {
            Toast.info("请选择规格", 1);
        }
        if (localStorage.goods){
            this.props.dispatch({type:'cart',amount:true})
        } else {
            this.props.dispatch({type:'cart',amount:false})
        }
    }
    // 规格
    Specifications(Index,indexs,e){
        let sizeList=this.state.size;
        sizeList[Index]=this.state.specList[Index].values[indexs];
        this.setState({size:sizeList});
        let parent = e.target.parentNode;
        parent.childNodes.forEach(Item=>{
            Item.className = '';
        });
        e.target.className = item.activeOne;
    }

    render() {
        const sidebar = (
            <div style={{background:'#F5F5F9'}}>
                <div className={item.boxSidebar}>
                    <img src={this.state.txtList[0]} alt=''/>
                    <div className={item.boxActive}>
                        <p>{this.state.good.title}</p>
                        <span>￥{this.state.good.price}</span>
                        <span>商品编码：{this.state.good.gid}</span>
                    </div>
                    <div className={item.boxSpecList}>
                        {this.state.specList.map((Item,Index)=>{
                            return(
                                <div key={Index}>
                                    <p >{Item.title}</p>
                                    <ul>
                                        {Item.values.map((items,indexs)=>{
                                            return(
                                                <li onClick={this.Specifications.bind(this,Index,indexs)} key={indexs}>
                                                    {items.value}
                                                </li>
                                            )
                                        })}
                                    </ul>
                                </div>
                            )
                        })}
                    </div>
                    <div className={item.boxBtns}>
                        <p>购买数量</p >
                        <div>
                            <button onClick={this.reduce.bind(this)}>-</button>
                            <span>{this.state.amount}</span >
                            <button onClick={this.plus.bind(this)}>+</button>
                        </div>
                    </div>
                </div>
                <div className={item.boxDivTwo} onClick={this.determine.bind(this)}>确认</div>
            </div>
        );
        return(
            <div className={item.boxItem}>
                <Drawer
                    className="my-drawer"
                    style={{ minHeight: document.documentElement.clientHeight }}
                    position="bottom"
                    enableDragHandle
                    sidebar={sidebar}
                    open={this.state.open}
                    onOpenChange={this.onOpenChange}
                >
                    <Carousel autoplay={true} infinite className={item.boxCarousel}>
                        {this.state.txtList.map((item,index)=>{
                            return(
                                <p key={index}>
                                    <img src={item} alt=''onLoad={()=>{
                                        this.setState({imgHeight:'auto'})
                                    }}/>
                                </p>
                            )
                        })}
                    </Carousel>
                    <div className={item.boxDiv}>
                        <p>{this.state.good.title}</p>
                        <p>￥{this.state.good.price}</p>
                        <p>
                            快递：{this.state.good.freight}元
                            <span>月销量{this.state.good.sales}件</span>
                        </p>
                    </div>
                    <div className={item.boxDivOne}>
                        <h3>商品评价 ({this.state.goodList.length})</h3>
                        {this.state.goodList.map((item,index)=>{
                            return(
                                <div key={index}>
                                    <img src={item.head} alt=''/>
                                    <span>{item.nickname}</span>
                                    <p>{item.content}</p>
                                    <p>{item.times}</p>
                                </div>
                            )
                        })}
                        <div className={this.state.show?item.show:item.hide}>
                            <div className={item.bocLink}>
                                <Link to={"/goods/details/review?gid="+this.state.id}>查看更多评价</Link>
                            </div>
                        </div>
                        <div className={!this.state.show?item.show:item.hide}>
                            <p className={item.boxView}>暂无评价！</p>
                        </div>
                    </div>
                    <div className={item.boxBtn}>
                        <button onClick={this.Btn.bind(this)}>收藏</button>
                        <button onClick={this.onOpenChange}>加入购物车</button>
                    </div>
                </Drawer>
            </div>
        )
    }
}

export default connect((state)=>{
    return{
        state:state
    }
})(ItemComponent)